<script>
import { getDriverTasksListAPI } from '../../../api/task'
import { ref } from 'vue'
 const list = ref([])

const formData = {
  page:1,
  pageSize:10,
  status:1
}
const getDriverTasksList = async() => {
  const { data } = await getDriverTasksListAPI(formData)
  console.log(data);
  list.value = data.items
}
getDriverTasksList()

</script>
<template>
  <scroll-view scroll-y refresher-enabled class="scroll-view">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for=" item in list" :key="item.id">
        <navigator hover-class="none" :url="'/subpkg_task/detail/index?id=' + item.id">
          <view class="header">
            <text class="no">任务编号: {{ item.id }}</text>
            <text class="status" v-if="item.status===1">待提货</text>
            <text class="status" v-else-if="item.status===2">在途</text>
            <text class="status" v-else-if="item.status===3">改派</text>
            <text class="status" v-else-if="item.status===4">已交付</text>
            <text class="status" v-else>已作废</text>
         
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >{{ item.startAddress }}</view
              >
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planArrivalTime }}</view>
          <navigator
            hover-class="none"
            url="/subpkg_task/pickup/index"
            class="action"
            >交付</navigator
          >
        </view>
      </view>
      <view class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: XAHH1234567</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号</view
              >
              <view class="line">河南省郑州市路北区北清路99号</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <navigator
            hover-class="none"
            url="/subpkg_task/record/index"
            class="action"
            >回车登记</navigator
          >
        </view>
      </view>
      <view v-if="false" class="task-blank">无在途货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.scroll-view {
  height: 100vh;
  background-color: #f4f4f4;
}

.task-card {
  padding: 24rpx 30rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  margin: 15rpx 30rpx 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.no {
  font-size: 30rpx;
  color: #000;
  font-weight: 500;
}

.status {
  padding: 5rpx 20rpx 3rpx;
  font-size: 24rpx;
  color: #f4f4f4;
  border: 2rpx solid #fff;
  border-radius: 60rpx;
}

.body {
  padding: 40rpx 0;
  border-bottom: 1rpx solid #f4f4f4;
}

.timeline {
  border-left: 2rpx dashed #f4f4f4;
  margin-left: 30rpx;
  padding: 0 30rpx;
  position: relative;

  &::before,
  &::after {
    position: absolute;
    left: -24rpx;
    width: 44rpx;
    height: 44rpx;
    text-align: center;
    line-height: 44rpx;
    font-size: 25rpx;
    color: #fff;
    border-radius: 50%;
    background-color: pink;
  }

  &::before {
    content: '起';
    top: -1rpx;
    background-color: #000;
  }

  &::after {
    content: '止';
    bottom: -1rpx;
    background-color: red;
  }
}

.line {
  font-size: 28rpx;
  color: #989898;
  margin-top: 30rpx;

  &:first-child {
    margin-top: 0;
  }
}

.footer {
  padding: 20rpx 0;
  position: relative;

  &.flex {
    display: flex;
  }
}

.label,
.time {
  font-size: 28rpx;
  margin-right: 15rpx;
  color: #989898;
}

.action {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  height: 64rpx;
  padding: 0 40rpx;
  background-color: #fadcd9;
  color: #fff;
  font-size: 28rpx;
  border-radius: 64rpx;
  transform: translate(0, -50%);

  &[disabled] {
    background-color: #fadcd9;
  }
}

.task-blank {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 201rpx;
  text-align: center;
  padding-top: 130rpx;
  background-image: url(https://sl-driver.oss-cn-hangzhou.aliyuncs.com/images/blank%402x.png);
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 24rpx;
  // color: red;
  transform: translate(-50%, -100%);
}


</style>
